<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { getWarehouseListApi,getWarehouseAreaListApi } from "@/api/warehouseApi";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    status: 1,
    code: "",
    name: "",
    warehouseId: 0,
    warehouse: "",
    warehouseAreaId: 0,
	warehouseLocationId: null,
	number: null,
	row: null,
	storey: null,
	column: null,
	long: null,
	width: null,
	height: null,
	volume: null,
	capacity: null,
	payload: null,
	remarks: null,
  })
});
const statusOptions = [
  {
    value: 1,
    label: "启用"
  },
  {
    value: 2,
    label: "禁用"
  }
];
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
const warehouseOption = ref([])
const getWarehouseList = async() => {
	const res = await getWarehouseListApi({page:1,perPage: 999});
	warehouseOption.value = res.result.list
}
const warehouseAreaOption = ref([])
const getWarehouseAreaList = async(value?:any) => {
	const res = await getWarehouseAreaListApi({page:1,perPage: 999, warehouseId: value});
	warehouseAreaOption.value = res.result.list
}
onBeforeMount(() => {
    getWarehouseList();
	getWarehouseAreaList()
});

defineExpose({ getRef });
const warehouseChange = (value: any) => {
	newFormInline.value.warehouseAreaId = null
	getWarehouseAreaList(value)
}
const switchVal = ref()
const switchChange = (val: boolean | string | number) => {
	if(val) {
		newFormInline.value.code = 'L'+(new Date()).toLocaleString().replace(/[:/ ]/g, '')
	} else {
		newFormInline.value.code = ''
	}
}
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
	  <re-col :value="12" :xs="24" :sm="24">
		  <el-form-item label="仓库名称" prop="warehouseId">
			 <el-select v-model="newFormInline.warehouseId" placeholder="请选择" style="width: 100%" @change="warehouseChange">
				<el-option
				  v-for="item in warehouseOption"
				  :key="item.warehouseId"
				  :label="item.name"
				  :value="item.warehouseId"
				  :disabled="item.status===2"
				>
				  <span style="float: left">{{ item.name }}</span>
				  
				  <el-tag size="small" :type="item.status===1?'primary':'danger'" effect="light"  style="
					  float: right;
					  font-size: 13px;
						  margin-top: 7px;
					">
					{{item.status===1?'启用':'禁用'}}
				  </el-tag>
				</el-option>
			  </el-select>
		  </el-form-item>
	  </re-col>
	  <re-col :value="12" :xs="24" :sm="24">
		  <el-form-item label="库区名称" prop="warehouseAreaId">
			 <el-select v-model="newFormInline.warehouseAreaId" placeholder="请选择" style="width: 100%">
				<el-option
				  v-for="item in warehouseAreaOption"
				  :key="item.warehouseAreaId"
				  :label="item.name"
				  :value="item.warehouseAreaId"
				  :disabled="item.status===2"
				>
				  <span style="float: left">{{ item.name }}</span>
				  
				  <el-tag size="small" :type="item.status===1?'primary':'danger'" effect="light"  style="
					  float: right;
					  font-size: 13px;
						  margin-top: 7px;
					">
					{{item.status===1?'启用':'禁用'}}
				  </el-tag>
				</el-option>
			  </el-select>
		  </el-form-item>
	  </re-col>
	  <!-- 库房和库区合并 -->
	  <!-- <el-cascader :props="props" /> -->
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="库位名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入库位名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="库位编码" prop="code">
		  <div style="display: flex;">
		  	<el-input v-model="newFormInline.code" clearable placeholder="请输入库位编码" :maxlength="30" style="width: 140px;"
			:disabled="newFormInline.title==='新增'?false:true"/>
		  	<div style="display: flex;align-items: center;margin-left: 10px;" v-if="newFormInline.title==='新增'">
		  		<el-switch v-model="switchVal" @change="switchChange" active-text="自动生成"/>
		  	</div>
		  </div>
        </el-form-item>
      </re-col>
	  <re-col :value="12" :xs="24" :sm="24">
	    <el-form-item label="巷道号" prop="number">
	      <el-input
	        v-model="newFormInline.number"
	        clearable
	        placeholder="请输入巷道号"
	      />
	    </el-form-item>
	  </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
			clearable
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
	  <div style="display: flex;justify-content: space-between;width: 100%;">
		  <re-col :value="8" :xs="8" :sm="8">
		    <el-form-item label="排" prop="row">
		      <el-input-number v-model="newFormInline.row" :min="1" :precision="0" controls-position="right"/>
		    </el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
		    <el-form-item label="列" prop="column">
		      <el-input-number v-model="newFormInline.column" :min="1" :precision="0" controls-position="right"/>
		    </el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
		    <el-form-item label="层" prop="storey">
		      <el-input-number v-model="newFormInline.storey" :min="1" :precision="0" controls-position="right"/>
		    </el-form-item>
		  </re-col>
	  </div>
	  <div style="display: flex;justify-content: space-between;width: 100%;">
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="长(cm)" prop="long">
			  <el-input-number v-model="newFormInline.long" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="宽(cm)" prop="width">
			  <el-input-number v-model="newFormInline.width" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="高(cm)" prop="height">
			  <el-input-number v-model="newFormInline.height" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
	  </div>
	  <div style="display: flex;justify-content: space-between;width: 100%;">
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="体积(立方米)" prop="volume">
			  <el-input-number v-model="newFormInline.volume" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="容量(立方米)" prop="capacity">
			  <el-input-number v-model="newFormInline.capacity" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
		  <re-col :value="8" :xs="8" :sm="8">
			<el-form-item label="载重量(千克)" prop="payload">
			  <el-input-number v-model="newFormInline.payload" :min="1" :precision="2" controls-position="right"/>
			</el-form-item>
		  </re-col>
	  </div>
	  <re-col :value="24" :xs="24" :sm="24">
		<el-form-item label="备注" prop="remarks">
		  <el-input
		      v-model="newFormInline.remarks"
		      placeholder="请输入备注"
		      type="textarea"
		    />
		</el-form-item>
	  </re-col>
    </el-row>
  </el-form>
</template>
<style scoped></style>
